<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <style>
        body {
            background: black;
            color: fuchsia;
        }

        .btn {
            font-size: 30px;
            border: solid;
            border-color: deeppink;
            border-radius: 5px;
            margin: 3px;
        }
        .green{
            color: chartreuse;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="vApp">
    <h1>单击事件</h1>
    <button v-on:click="alert()" class="btn">我是按钮</button>
    <br>
    <!--单击事件可以缩写为@click-->
    <button @click="alert('ok')" class="btn">我也是按钮</button>
    <hr>
    <h1>事件修饰符</h1>
    <!--&lt;!&ndash; 阻止单击事件冒泡 &ndash;&gt;-->
    <!--<a v-on:click.stop="doThis"></a>-->
    <!--&lt;!&ndash; 提交事件不再重载页面 &ndash;&gt;-->
    <!--<form v-on:submit.prevent="onSubmit"></form>-->
    <!--&lt;!&ndash; 修饰符可以串联  &ndash;&gt;-->
    <!--<a v-on:click.stop.prevent="doThat"></a>-->
    <!--&lt;!&ndash; 只有修饰符 &ndash;&gt;-->
    <!--<form v-on:submit.prevent></form>-->
    <!--&lt;!&ndash; 添加事件侦听器时使用事件捕获模式 &ndash;&gt;-->
    <!--<div v-on:click.capture="doThis">...</div>-->
    <!--&lt;!&ndash; 只当事件在该元素本身（而不是子元素）触发时触发回调 &ndash;&gt;-->
    <!--<div v-on:click.self="doThat">...</div>-->

    <!--&lt;!&ndash; click 事件只能点击一次，2.1.4版本新增 &ndash;&gt;-->
    <!--<a v-on:click.once="doThis"></a>-->
    <h3>实例:按钮只能点击一次</h3>
    <button v-on:click.once="alert('点到了')" class="btn">只能点一次</button>
    <h1>按键修饰符</h1>
    全部的按键别名：
    <li>enter</li>
    <li>tab</li>
    <li>delete (捕获 "删除" 和 "退格" 键)</li>
    <li>esc</li>
    <li>space</li>
    <li>up</li>
    <li>down</li>
    <li>left</li>
    <li>right</li>
    <li>ctrl</li>
    <li>alt</li>
    <li>shift</li>
    <li>meta</li>
    <p>Vue 允许为 v-on 在监听键盘事件时添加按键修饰符</p>
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <!--13是enter键-->
    <input v-on:keyup.13="clickEnterKey()" value="点击按键13" class="btn" type="button">
    <!--除了使用数字,也可以使用键名-->
    <input v-on:keyup.tab="clickTabKey()" value="点击tab键" class="btn" type="button">
    <hr>
    <h2>按键修饰符支持组合键形式</h2>
    <h3>c+r</h3>
    <!--测试没有效果-->
    <input type="button" class="btn" value="监听c+r" @click.67.82="cAndR()">
    <hr>
    <h1>Vue提供了一个特殊变量$event，用于访问原生DOM事件</h1>
    <a href="http://www.baidu.com" @click="prevent('这是一个测试，让点击失效',$event)" class="green">跳转到百度</a>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#vApp',
        data: {
            msg: 'vue事件处理'
        },
        methods: {
            alert: function (n) {
                if (n) {
                    alert(n);
                } else {
                    alert(this.msg);
                }
            },
            clickEnterKey:function () {
                alert('点到了enter键');
            },
            //电脑上tab键点击可能会被拦截，多点几下会有效果
            clickTabKey:function () {
                alert('点到了tab键');
            },
            cAndR:function () {
                alert('点到了c+r键');
                console.log('点到了c+r键');
            },
            prevent:function (msg,$event) {
                $event.preventDefault();
                alert(msg);
            }
        }
    });
</script>
</html>